<template>
  <div class="header"  >

    <nav class="navbar navbar-default ">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button style="background:transparent;" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
         
          <a class="navbar-brand " href="#">BrokenLife</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li ><a href="/">我的首页</a></li>
            <li><a href="#me">我的信息</a></li>
            <li><a href="#sk">我的技能</a></li>
            <li><a href="#wk">我的作品</a></li>
          </ul>
          
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <div class="header-title">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 content">
            <h1>请记住，坚持不懈，直到成功</h1>
            <p class="nametext css13a7d2c6691db12">我叫钟伟杰，是一名前端开发</p>
           </div>
          </div>
        </div>
    </div>
   </div>
 
   
   

</template>

<script>
export default {
  name: 'app-header',
  data () {
    return {
     
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nametext{
  margin-top:10px; 
  color: #fff;
  font-size: 30px;
  
}
.header-title{
  padding: 100px 0;
 
}
.content{
  margin: 25px 0 75px 0;
   text-align: center;
}
h1{
    color: #fff;
}
@media only screen and (min-width: 768px){
  h1{
    font-size: 50px;
  }
}
@media only screen and (max-width: 480px){
 .nametext{
  margin-top:10px; 
  color: #fff;
  font-size: 17px;
} 
  h1{
    font-size: 25px;
  }
  .content{
  margin: 20px 0;
 }
 .header-title{
  padding: 10px 0 50px 0;
}
}
</style>
<style >
.header{
      background: url('../assets/img/home-bg.jpg') no-repeat center center;
      box-shadow: 0px 0px 30px #888888 inset;
}
.navbar{
  border: none;
    font-size: 1.6rem;
    color:#fff;
  }
.navbar-default .navbar-brand{
    color:#fff;
  }
.navbar-default{
  background:transparent;
  color: #fff
}
.navbar-nav li:hover{
  background-color:#63B8FF;
  opacity:0.5;
   color: #fff
}
.navbar-default .navbar-nav>li>a {
    color: #fff;
    }
</style>
